<template>
  <div class="page">
    <el-form ref="form" :model="form" label-width="90px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="申请时间段">
            <el-date-picker v-model="form.starttime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 160px;"></el-date-picker>~
            <el-date-picker v-model="form.endtime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 160px;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="公司名称" prop="companyname">
            <el-input v-model="form.companyname" placeholder="请输入公司名称" style="width: 200px;" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="text-align: right;">
          <el-button type="primary" style="width: 100px;" @click="query">查询</el-button>
        </el-col>
      </el-row>
		<el-row>
			<el-form-item label="地区查询" >
				<cityCascader
					:citys="region"
					level="0"
					@handleChange="handleCityChange"
				></cityCascader>
			</el-form-item>
		</el-row>
    </el-form>
    <ul class="checkTab">
		<template v-for="item in tabs">
			<el-badge :value="totalNum" :max="99" :hidden="item.label != '待开票' || totalNum == 0" class="item">
				<li :key="item.status" v-html="item.label" :class="{'active':form.status===item.status}" @click="clickTab(item)"></li>
			</el-badge>
		</template>
      
    </ul>
    <div class="page-content" v-loading="loading" size="small">
      <el-table stripe :data="tableData" style="width: 100%" border>
        <el-table-column prop="invoicetype" label="发票类型" align="center"></el-table-column>
        <el-table-column prop="companyname" label="企业名称" align="center"></el-table-column>
        <!-- <el-table-column prop="companyname" label="发票抬头" align="center">
        </el-table-column>-->
        <el-table-column prop="identifynum" label="纳税人识别号" align="center" width="210px"></el-table-column>
        <el-table-column prop="invoicenum" label="开票金额" align="center"></el-table-column>
        <el-table-column prop="applydate" label="申请时间" align="center"></el-table-column>
        <el-table-column v-if="form.status==='1'" prop="auditorname" label="开票人" align="center"></el-table-column>
        <el-table-column v-if="form.status==='1'" prop="auditdate" label="审核时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center" v-if="form.status==='0' && btnAuthority.zyfpkpBtn">
          <template slot-scope="scope">
            <el-button type="text" class="operate" @click="viewDetails(scope.row.invoiceid)">开票</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" v-else>
          <template slot-scope="scope" v-if="form.status==='1'">
            <el-button type="text" class="operate" @click="viewDetails(scope.row.invoiceid)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 22px;">
        <el-pagination background :current-page="form.pagenum" :page-size="form.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" :page-sizes="[10, 20, 30, 50, 100]" @current-change="handleCurrentChange" @size-change="handleSizeChange"></el-pagination>
      </div>
    </div>
    <!-- 开票详情 -->
    <el-dialog width="850px" :visible.sync="dialogVisible" @close="closeDialog">
      <div class="invoice-detail">
        <div class="comTitle clearfix">
          <div class="titleName fl" v-html="form.status==='0'?'开票':'详情'"></div>
          <div :class="{'fr':true,'status':form.status==='0','pass':form.status==='1'}" v-html="form.status==='0'?'待开票':'已开票'"></div>
        </div>
        <div class="title">开票信息</div>
        <div class="info">
          <el-row>
            <el-col :span="12">发票类型：{{invoiceDetail.invoicetype}}</el-col>
            <el-col :span="12">发票抬头：{{invoiceDetail.companyname}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="12">纳税人识别号：{{invoiceDetail.identifynum}}</el-col>
            <el-col :span="12">开户银行：{{invoiceDetail.bankname}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="12">开户账号：{{invoiceDetail.bankaccount}}</el-col>
            <el-col :span="12">注册场所地址：{{invoiceDetail.bankaddress}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="12">公司注册电话：{{invoiceDetail.registerphone}}</el-col>
            <el-col :span="12">
              <span>开票金额：</span>
              <span style="color:#e60012">{{invoiceDetail.invoicenum}}</span>
            </el-col>
          </el-row>
          <el-row v-if="form.status==='1'">
            <el-col :span="12">开票人：{{invoiceDetail.auditorname}}</el-col>
            <el-col :span="12">开票时间：{{invoiceDetail.auditdate}}</el-col>
          </el-row>
        </div>
        <div class="title">邮寄地址</div>
        <div class="info">
          <el-row>
            <el-col :span="12">联系人姓名：{{invoiceDetail.linkman}}</el-col>
            <el-col :span="12">联系电话：{{invoiceDetail.telnum||invoiceDetail.linkphone}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="12">地址：{{invoiceDetail.address}}</el-col>
            <el-col :span="12">邮编：{{invoiceDetail.code}}</el-col>
          </el-row>
        </div>
        <el-row v-if="form.status === '0'" class="invoice-detail-footer">
          <div class="invoice-detail-btn-box">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="billing">开票成功</el-button>
          </div>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script src="./index.js"></script>

<style src="./index.css" scoped>
</style>

